<template>
	<scroll-view :scroll-y="isFilterTags ? false : true" class="scrollSty" @scrolltolower="scrolltolowerFnc">
		<view class="shopping-main">
			<view class="shopping-searchOrFilter">
				<view class="shopping-search">
					<uni-search-bar
						radius="100"
						style="flex: 1"
						v-model="shopQuery.keyword"
						placeholder="请输入药品名称、症状、品牌搜索"
						clearButton="always"
						cancelButton="none"
						@confirm="search"
						@cancel="search"
						@clear="search"
					/>
					<text class="search-title" @click="search">搜索</text>
				</view>

				<!-- 筛选 -->
				<view class="shopping-filter">
					<view class="shopping-filter-qgs" @click="changeActive">
						<image src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241201/8f64965296ca41b1b3051ab79fe66fc0.png" mode="widthFix" class="images" v-show="isActive"></image>
						<image
							src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241201/ca160c934a38ed074cd8fad0920fd83c.png"
							mode="widthFix"
							class="images"
							v-show="!isActive"
						></image>
					</view>

					<view class="shopping-filter-sds" @click="changeActive">
						<image
							src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241201/d36935f430b8b7d39cdb248dfcc43e01.png"
							mode="widthFix"
							class="images"
							v-show="!isActive"
						></image>
						<image src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241201/3c55cf9e36e9698a7f4b55852cf8779e.png" mode="widthFix" class="images" v-show="isActive"></image>
					</view>

					<view class="shopping-filters" @click="openFilterTags">
						<text>筛选</text>
						<uni-icons type="settings" style="margin-left: 8rpx" size="20"></uni-icons>
					</view>
				</view>

				<!-- 筛选项 -->
				<view class="filterTags" v-if="isFilterTags">
					<view class="filterList">
						<view class="filter-item">
							<view class="filter-item-header">分类</view>
							<view class="filterTags-list">
								<view
									class="tagsItem"
									@click="changeClassify(item.id)"
									v-for="(item, index) in classifyList"
									:key="item.id"
									:class="[categoryIndex == item.id ? 'tagsColor' : '']"
								>
									{{ item.name }}
								</view>
							</view>
						</view>

						<view class="filter-item">
							<view class="filter-item-header">类型</view>
							<view class="filterTags-list">
								<view
									class="tagsItem"
									@click="changeRecipeTypeIndex(item.value)"
									v-for="(item, index) in recipeTypeList"
									:key="item.value"
									:class="[recipeTypeIndex == item.value ? 'tagsColor' : '']"
								>
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<view class="filter-btn">
						<view class="btn" style="margin-right: 20rpx" @click="getreset">重置</view>
						<view class="btn btnSty" @click="subFilterShop">确定</view>
					</view>
				</view>
			</view>

			<!-- 商品列表 -->
			<view class="shoppingList" v-if="shopListData.length > 0">
				<view class="shopItem" v-for="(item, index) in shopListData" :key="item.id">
					<hwxcShopSidewise :shopInfo="item" :shopType="isActive ? 'lightning' : 'shop'" />
				</view>

				<view class="overlay" v-if="isFilterTags" @click="isFilterTags = false"></view>
			</view>

			<!-- 商品为空 -->
			<view class="shopNone" v-else>
				<image src="https://test-haiwang.gumengya.com/uploads/20241119/c00fee1af11d02bbad54c1eb09908c13.png" mode="widthFix" class="cartImage"></image>
				<text class="title">您搜索的商品在【{{isActive?'闪电送':'全国送'}}】暂无库存，您可前往 【{{isActive?'全国送':'闪电送'}}】搜索或换其他同类商品</text>
				<view class="btn" @click="changeActive">切换{{isActive?'全国送':'闪电送'}}搜索</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import hwxcShopSidewise from '../../components/hwxcShopSidewise/hwxcShopSidewise.vue';
import { homeGoodsList, homeCategory } from '../../api/home/index.js';
import { flashcategory } from '../../api/flash/index.js';
export default {
	data() {
		return {
			// 全国送or闪电送
			isActive: false,
			// 筛选状态
			isFilterTags: false,
			// 商品参数
			shopQuery: {
				page: 1,
				limit: 10,
				keyword: '',
				type: ''
			},
			// 商品数据
			shopListData: [],
			// 商品筛选项
			classifyList: [],
			// 分类ID
			categoryIndex: null,
			recipeType: '',
			recipeTypeList: [
				{
					name: '处方药',
					value: '1'
				},
				{
					name: '非处方药',
					value: '0'
				}
			],
			recipeTypeIndex: null
		};
	},

	components: {
		hwxcShopSidewise
	},

	async onLoad(option) {
		const { name, category_id, search_type } = option;
		this.shopQuery.keyword = name || '';
		this.categoryIndex = category_id || null;
		// this.isActive = search_type == 0 ?'false':'true';
		// console.log(this.isActive);
		if (this.isActive) {
			await this.getFlashcategory();
		} else {
			await this.getHomeCategory();
		}
		await this.getHomeGoodsList();
	},

	methods: {
		// 搜索
		async search() {
			if(this.shopQuery.keyword){				
				const searchTagsList = await uni.getStorageSync('searchTags') || [];
				const list = searchTagsList.filter((item) => {
					return item.name == this.shopQuery.keyword;
				});
				if (list.length == 0) {
					searchTagsList.push({
						name: this.shopQuery.keyword
					});
				}
				uni.setStorageSync('searchTags', searchTagsList);
			}
			
			this.shopQuery.page = 1;
			this.shopListData = [];
			await this.getHomeGoodsList();
		},

		// 触底
		async scrolltolowerFnc() {
			this.shopQuery.page++;
			await this.getHomeGoodsList();
		},

		// 获取商品分类 - 全国送
		async getHomeCategory() {
			try {
				const resData = await homeCategory();
				this.classifyList = resData.data;
			} catch (e) {
				throw Error(e);
			}
		},

		// 获取商品分类 - 闪电送
		async getFlashcategory() {
			try {
				const resData = await flashcategory();
				this.classifyList = resData.data;
			} catch (e) {
				throw Error(e);
			}
		},

		// 切换选项
		async changeActive() {
			this.isActive = !this.isActive;
			this.categoryIndex = null;
			this.shopListData = [];
			this.shopListData.page = 1;
			if (this.isActive) {
				await this.getFlashcategory();
			} else {
				await this.getHomeCategory();
			}
			await this.getHomeGoodsList();
		},

		// 打开筛选
		openFilterTags() {
			this.isFilterTags = !this.isFilterTags;
		},

		// 商品数据
		async getHomeGoodsList() {
			try {
				this.shopQuery.type = this.isActive ? '1' : '0';
				let requeryData = { ...this.shopQuery };
				if (this.categoryIndex) {
					requeryData.category_id = this.categoryIndex;
				}
				requeryData.recipeType = this.recipeTypeIndex;
				const resData = await homeGoodsList(requeryData);
				if (resData.code == 1) {
					let list = resData.data.data || [];
					this.shopListData = [...(this.shopListData || []), ...list];
				} else {
					uni.showToast({
						title: '获取商品失败',
						icon: 'error'
					});
				}
			} catch (e) {
				throw Error(e);
			}
		},

		// 切换分类选项
		async changeClassify(id) {
			if (this.categoryIndex == id) {
				this.categoryIndex = null;
			} else {
				this.categoryIndex = id;
			}
		},

		// 确认筛选
		async subFilterShop() {
			await this.dataDef();
			await this.getHomeGoodsList();
		},

		// 数据初始化
		async dataDef() {
			this.isFilterTags = false;
			this.shopQuery.page = 1;
			this.shopListData = [];
		},

		// 重置
		async getreset() {
			this.categoryIndex = null;
			this.recipeTypeIndex = null;
			await this.dataDef();
			if (this.isActive) {
				await this.getFlashcategory();
			} else {
				await this.getHomeCategory();
			}
			await this.getHomeGoodsList();
		},

		changeRecipeTypeIndex(index) {
			this.recipeTypeIndex = index;
		}
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	height: 100%;
}
</style>

<style scoped lang="scss">
.scrollSty {
	flex: 1;
	overflow: scroll;
	.shopping-main {
		.shopping-searchOrFilter {
			position: relative;
			top: 0px;
			left: 0px;
			width: 100%;
			z-index: 999;
			.shopping-search {
				display: flex;
				align-items: center;
				background-color: #fff;

				.search-title {
					margin-right: 20rpx;
					font-size: 28rpx;
				}
			}

			.shopping-filter {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 90rpx;
				font-weight: bold;
				.shopping-filter-qgs {
					flex: 1;
					text-align: center;
					.images {
						height: 90rpx;
						width: 120rpx;
					}
				}

				.shopping-filter-sds {
					flex: 1;
					text-align: center;
					.images {
						width: 120rpx;
						height: 90rpx;
					}
				}

				.shopping-filters {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 29rpx;
				}
			}

			.filterTags {
				position: absolute;
				left: 0px;
				bottom: -500rpx;
				width: 100%;
				height: 500rpx;
				background-color: #fff;
				border-bottom-left-radius: 24rpx;
				border-bottom-right-radius: 24rpx;
				display: flex;
				flex-direction: column;
				.filterList {
					flex: 1;
					box-sizing: border-box;
					padding: 20rpx;
					overflow-y: auto;
					.filter-item {
						margin-bottom: 30rpx;
						.filter-item-header {
							font-weight: bold;
							margin-bottom: 20rpx;
							font-size: 26rpx;
						}

						.filterTags-list {
							display: flex;
							flex-wrap: wrap;
							gap: 28rpx;
							.tagsItem {
								width: 30%;
								height: 55rpx;
								line-height: 55rpx;
								text-align: center;
								background-color: #f3f3f3;
								font-size: 24rpx;
								border-radius: 24rpx;
							}

							.tagsColor {
								background-color: #e43927;
								color: #fff;
							}
						}
					}
				}

				.filter-btn {
					height: 120rpx;
					display: flex;
					align-items: center;
					box-sizing: border-box;
					padding: 20rpx;
					.btn {
						flex: 1;
						text-align: center;
						height: 70rpx;
						line-height: 70rpx;
						border-radius: 70rpx;
						border: 1px #cfcfcf solid;
						color: #666;
					}

					.btnSty {
						color: #fff;
						background-color: #e43927;
						border: none;
					}
				}
			}
		}

		.shoppingList {
			box-sizing: border-box;
			padding: 20rpx;
			position: relative;
			padding-top: 0px;

			.shopItem {
				background-color: #fff;
				border-radius: 24rpx;
				box-sizing: border-box;
				padding: 20rpx;
				margin-bottom: 20rpx;
			}

			.overlay {
				background-color: rgba(0, 0, 0, 0.5);
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100vh;
			}
		}

		.shopNone {
			height: 700rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.cartImage {
				width: 300rpx;
				height: 300rpx;
			}

			.title {
				display: block;
				margin: 30rpx 0px;
				font-size: 26rpx;
				color: #666;
				padding: 0px 100rpx;
				text-align: center;
				line-height: 1.8;
			}

			.btn {
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				border-radius: 70rpx;
				background-color: #e43927;
				color: #fff;
				width: 300rpx;
				font-size: 28rpx;
			}
		}
	}
}
</style>
